<template>
    <el-form :model="form" label-width="120px" ref="form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="姓名:">
            <span>{{ form.userName }}</span>
          </el-form-item>
        </el-col>
  

      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="来访日期">
            <el-date-picker
              v-model="form.lfTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来访人" label-width="100px">
            <el-input v-model="form.lfName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="来访人电话" label-width="100px">
            <el-input v-model="form.lfTel" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来访人身份证" label-width="100px">
            <el-input v-model="form.lfIdentity" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="关系" label-width="100px">
            <el-select v-model="form.lfgxDictId" placeholder="请选择">
              <el-option
                v-for="dict in dicts"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来访人数" label-width="100px">
            <el-input-number
              v-model="form.lfNums"
              :min="1"
              :max="10"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
            <el-form-item label="来访状态">
          <el-select v-model="form.lfstatus" placeholder="请选择">
            <el-option
              v-for="payStatus in payStatuss"
              :key="payStatus.id"
              :label="payStatus.name"
              :value="payStatus.id"
            ></el-option>
          </el-select>
        </el-form-item>
     
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" label-width="100px">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <div>
          <el-button type="primary" @click="back">返回</el-button>
        </div>
        <div class="right-align">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-form-item>
  
    </el-form>
  </template>
      
      <script>
  export default {
    data() {
      return {
        payStatuss: [
        { id: "0", name: "待来访" },
        { id: "1", name: "已完成来访" },
        { id: "2", name: "探视中" },
        { id: "3", name: "来访失败" }
      ],
        form: {
          name: "",
          userId: "",
          lfTime: "",
          lfName: "",
          lfTel: "",
          lfIdentity: "",
          lfgxDictId: "",
          lfNums: 1, // 将 lfNum 的初始值设置为 1
          lfstatus: "",
          remark: "",
        },
        pageNum: 1,
        pageSize: 5,
        total: 0,
        dicts: [],
      };
    },
    methods: {
      queryLfgxDictId() {
        this.$axios.get("api/dict/queryDict/" + 1).then((res) => {
          if (res.data.code == 200) {
            this.dicts = res.data.data;
          }
        });
      },
      back() {
        this.$router.push({ path: "/lfRegister" });
      },

      submitForm() {
    
          this.$axios.post("api/register/updateLf", this.form).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("添加成功!");
              this.$router.push({ path: "/lfRegister" });
            } else {
              this.$message.error(res.data.msg);
            }
          });
      },
  
      prevPage(val) {
        //点击上一页触发
        this.pageNum = val;
        this.queryUser();
      },
      nextPage(val) {
        //点击下一页触发
        this.pageNum = val;
        this.queryUser();
      },
      sizeChange(val) {
        //val每一页条数
        this.pageNum = 1;
        this.pageSize = val;
        this.queryUser();
      },
      currentPage(val) {
        this.pageNum = val;
        this.queryUser();
      },
      queryCondition() {
        thispageNum = 1;
        this.queryUser();
      },
    },
    created() {
    this.form = this.$route.query.form;
    this.form.lfstatus=this.form.lfstatus.toString();
      this.queryLfgxDictId();

    },
  };
  </script>
      
    <style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .avatar {
    width: 120px; /* 调整为你需要的宽度 */
    height: 120px; /* 调整为你需要的高度 */
    object-fit: cover; /* 这条语句会使图片以 "cover" 模式显示，保持图片的本身比例长宽比，裁剪超出部分 */
  }
  .urgent-message {
    background-color: #cfe8ff; /* 淡蓝色背景 */
    color: #1890ff; /* 蓝色字体颜色 */
    padding: 10px;
    border: 1px solid #91d5ff; /* 淡蓝色边框 */
    border-radius: 5px;
    display: flex;
    align-items: center;
  }
  
  .info-icon {
    color: #1890ff; /* 蓝色图标颜色 */
    margin-right: 10px;
  }
  
  .message-text {
    font-weight: bold; /* 加粗字体 */
  }
  
  .right-align {
    text-align: right; /* 将内容右对齐 */
  }
  
  .blue-vertical-line {
    border-left: 3px solid blue; /* 设置竖线宽度和颜色 */
    height: 15px; /* 设置竖线高度，根据你的需要调整 */
    margin-right: 10px; /* 可选：设置竖线右边距，根据你的需要调整 */
  }
  
  .select-older-button {
    text-align: left; /* 将按钮左对齐 */
  }
  </style>